import "./anchorScroll.effect.js";
// import s from "./anchorScroll.module.css";
import { defineView } from "@/routers/tools.mjs";

/**
 * @type {DefineView}
 */
const AnchorScrollView = defineView({
  controller: class AnchorScrollViewController {
    /**
     * @param {ng.IAnchorScrollService} $anchorScroll
     * @param {ng.ILocationService} $location
     * @param {ng.WIScope} $scope
     */
    constructor($anchorScroll, $location, $scope) {
      $scope.gotoAnchor = /**
       * @param {string} x
       */ function (x) {
        const newHash = `anchor${x}`;
        if ($location.hash() !== newHash) {
          // set the $location.hash to `newHash` and
          // $anchorScroll will automatically scroll to it
          $location.hash(`anchor${x}`);
        } else {
          // call $anchorScroll() explicitly,
          // since $location.hash hasn't changed
          $anchorScroll();
        }
      };
    }
  },
  template: /* HTML */ html`
    <div class=${"fixedHeader"}>
      <a href="" ng-click="gotoAnchor(x)" ng-repeat="x in [1,2,3,4,5]">
        Go to anchor {{x}}
      </a>
    </div>
    <div id="anchor{{x}}" class=${"anchor"} ng-repeat="x in [1,2,3,4,5]">
      Anchor {{x}} of 5
    </div>
  `,
});

export default AnchorScrollView;
